<template>
  <div>
    <el-container>
      <!--侧边栏-->
      <aside-view :aside-width="asideWidth" :is-collapse="isCollapse" @changeComponent="changeComponent"></aside-view>
      <el-container>
        <!--头部区域-->
        <header-view :collapse-icon="collapseIcon" :admin="admin" :logout="logout"
                     :handle-collapse="handleCollapse"></header-view>
        <el-main>
          <component :is="currentComponent"></component>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import AsideView from "@/components/AsideView";
import HeaderView from "@/components/HeaderView";
import UserView from "@/views/admin/user/UserView";
import ProductView from "@/views/admin/product/ProductView";
import OrderView from "@/views/admin/order/OrderView";
import RelationView from "@/views/admin/seckill/RelationView";
import SessionView from "@/views/admin/seckill/SessionView";

export default {
  name: "AdminView",
  components: {AsideView, HeaderView, UserView, ProductView, OrderView, RelationView, SessionView},
  data() {
    return {
      //当前显示的组件
      currentComponent: 'UserView',
      //默认菜单不收缩
      isCollapse: false,
      //侧边栏宽度
      asideWidth: '200px',
      //默认显示图标为收缩图标
      collapseIcon: 'el-icon-s-fold',
      //管理员数据
      admin: {
        name: ''
      },
    }
  },
  methods: {
    //切换当前页面显示的核心组件
    changeComponent(index) {
      if (index === "/adminUser") {
        this.currentComponent = 'UserView'
      } else if (index === "/adminProduct") {
        this.currentComponent = 'ProductView'
      } else if (index === "/adminOrder") {
        this.currentComponent = 'OrderView'
      } else if (index === "/adminSession") {
        this.currentComponent = 'SessionView'
      } else if (index === "/adminRelation") {
        this.currentComponent = 'RelationView'
      }
    },

    //退出登录
    logout() {
      localStorage.removeItem("user")
      this.$router.push(`/login`)
    },

    //控制菜单的左右收缩
    handleCollapse() {
      this.isCollapse = !this.isCollapse
      this.asideWidth = this.isCollapse ? '64px' : '200px'
      this.collapseIcon = this.isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'
    },

    //获取当前登录的用户数据
    getAdmin() {
      //从本地存储中获取用户数据
      let user = localStorage.getItem("user")
      //设置name
      if (user) {
        user = JSON.parse(user)
        this.admin.name = user.data.name
      }
    },
  },

  mounted() {
    this.getAdmin()
  }
}
</script>

<style>
@import "@/css/global.css";
</style>